<template>
	<view>
		<view class="uni-margin-wrap pore">
			<image :src="apiUrl + '/profile/upload/2024/05/29/ec62357f5f5b47be800746cdfc62f44f_20240529165340A004.png'" mode="widthFix" class="width100"></image>
			<view class="ban-logo">
				<image src="../../static/images/index/indexlogo.png" mode="widthFix" style="width: 300rpx;"></image>
			</view>
		</view>
		<view class="login_box bgFff pore">
			<u-button v-if="!checked[0]" shape="circle"
				color="#FFDE6D" :customStyle="{'height':'100rpx'}" @click="check">
				<view class="flex">
					<!-- <image src="../../static/images/me/wx.png" mode="" style="width: 60rpx;height: 60rpx;"></image> -->
					<text class="bold c343 f32">手机号快捷登录</text>
				</view>
			</u-button>
			<u-button v-else open-type="getPhoneNumber" @getphonenumber="getPhonebtn" shape="circle"
				color="#FFDE6D" :customStyle="{'height':'100rpx'}">
				<view class="flex">
					<!-- <image src="../../static/images/me/wx.png" mode="" style="width: 60rpx;height: 60rpx;"></image> -->
					<text class="bold c343 f32">手机号快捷登录</text>
				</view>
			</u-button>
			<u-gap height="30"></u-gap>
			<view class="flex flex-wrap">
				<u-checkbox-group v-model="checked">
					<u-checkbox shape="circle" size="16" activeColor="#FFDE6D" labelSize="12"
						label="我已阅读并同意小程序" :name="true">
					</u-checkbox>
				</u-checkbox-group>
				<text class="f24 blue" @click="nologinJump('/subpage/news/detail?code=7')">《用户协议》</text>、
				<text class="f24 blue" @click="nologinJump('/subpage/news/detail?code=9')">《隐私协议》</text>、
				<text class="f24 blue" @click="nologinJump('/subpage/news/detail?code=8')">《支付协议》</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {getPhone,updateUserinfo} from '@/common/api_user.js'
	import app_info from '@/common/appInfo.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		name:'',
		data() {
			return {
				checked: [],
				phone:''
			}
		},
		onLoad(option) {
			console.log(app_info, 'app_info')
		},
		computed: {
			apiUrl() {
				return app_info.api_host
			}
		},
		methods: {
			...mapActions(['getUserinfo']),
			check(){
				console.log(this.checked);
				uni.showToast({
					title:'请阅读并同意小程序《用户协议》、《隐私协议》、《支付协议》',
					icon:'none'
				})
			},
			async getPhonebtn(val) {
				const that = this
				let info = val.detail
				if (info.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading()
					console.log(1111,info.code);
					const res = await getPhone({
						code: info.code
					})
					console.log(res);
					if (res.code == 200) {
						if (res.msg) {
							that.phone = res.msg
							uni.hideLoading()
							that.updateUserinfo()
						}
					}
			
				} else {
					uni.showToast({
						title: '用户取消了登录',
						icon: 'none'
					})
				}
			},
			async updateUserinfo(){
				uni.showLoading()
				let userName = ''
				userName = '黄小石' + this.phone.substring(7,11)
				const res = await updateUserinfo({
					userPhone: this.phone,
					userName:userName
				})
				if (res.code == 200) {
					uni.hideLoading()
					await this.getUserinfo()
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.ban-logo {
		position: absolute;
		top: 100rpx;
		left: 50rpx;
		z-index: 999;
	}
	.login_box{
		border-radius: 50rpx 50rpx 0 0;
		margin-top: -50rpx;
		padding: 50rpx;
	}
</style>
